<template>
    <van-tabs :class="{'z-tab':true,'z-tab-border':border}">
        <van-tab 
            v-for="v,k in tabList" 
            :title="v.name" 
            :title-style="{
                paddingTop: `${top}px`
            }"
        ></van-tab>
    </van-tabs>
</template>
<script setup>
const props = defineProps({
    tabList: {
        type: Array,
        default: []
    },
    top: {
        type: String,
        default: '12px'
    },
    border: {
        type: Boolean,
        default: true
    },
});
</script>
<style scoped lang="scss">
.z-tab {

    &.z-tab-border {
        border-bottom: 1px solid #383840;
    }

    :deep(.van-tabs__wrap) {
        height: inherit;
    }
    :deep(.van-tabs__nav) {
        background: transparent;
        padding-bottom: 0;
    }
    :deep(.van-tab) {
        color: #CCCACA;
        padding: 12px 0;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 16px;
    }
    :deep(.van-tab--active) {
        color: #FFAA00;
        font-weight: bold;
    }
    :deep(.van-tabs__line) {
        background-color: #FFAA00;
        width: 30px;
        height: 2px;
        bottom: 0;
    }
}
</style>